<template>
  <div class="notice-detail">
    <div class="content">
      <div class="crumbs">
        <nuxt-link :to="`/notice-list?shopId=${shopId}`" class="item-a">{{
          shopId == 0 ? $t('lanhaiHeadlines') : $t('storeAnnouncement')
        }}</nuxt-link>
        <span class="arrow">></span>
        <span class="item-span">{{ noticeDet.title }}</span>
      </div>
      <div class="notic-box">
        <div class="det">
          <div class="tit">{{ noticeDet.title }}</div>
          <div class="time-box">
            <div class="text">{{$t('releaseTime')}}：</div>
            <div class="time">{{ noticeDet.publishTime }}</div>
          </div>
          <div class="con" v-html="noticeDet.content"></div>
        </div>
        <!-- <div class="list-box">
          <div class="more" @click="goNoticeList">
            <div class="text">最新公告</div>
            <div class="arrow"></div>
          </div>
          <div class="list">
            <div
              class="item"
              v-for="item in noticeList"
              :key="item.id"
              @click="goNoticeDet(item.id)"
            >
              <div class="tit">{{item.title}}</div>
              <div class="time">{{item.publishTime.substring(0,10)}}</div>
            </div>
            <div class="item arrow-box" v-if="this.pages > 1">
              <div class="prev-arrow" @click="prevItem" :class="{'disable': this.current <= 1}"></div>
              <div
                class="next-arrow"
                @click="nextItem"
                :class="{'disable': this.current >= this.pages}"
              ></div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import util from '../plugins/util'

export default {
  data () {
    return {
      id: this.$route.query.id,  // 接收公告列表id
      noticeDet: {},  // 公告详情
      noticeList: [],  // 公告列表
      pages: 1, // 总页数
      current: this.$route.query.current || 1, // 当前页数
      shopId: this.$route.query.shopId || 0
    }
  },
  mounted () {
    this.getNoticeDet()
    this.getNoticeList(1)
  },

  watch: {
    // 在当前页面点击顶部喇叭时进数据请求
    '$route' () { 
      //监听路由是否变化
      this.id = this.$route.query.id
      this.getNoticeDet()
    }
  },
  methods: {

    // 获取公告详情
    getNoticeDet () {
      this.$axios.get('/shop/notice/info/' + this.id).then(({ data }) => {
        data.content = util.formatHtml(data.content)
        this.noticeDet = data
      })
    },

    // 获取公告列表
    getNoticeList (cur) {
      this.$axios.get('/shop/notice/noticeList/' + this.shopId, {
        params: {
          current: cur,  //当前页
          size: 5
        }
      }).then(({ data }) => {
        this.noticeList = data.records
        this.pages = data.pages
      })
    },

    // 切换分页
    prevItem () {
      if (this.current > 1) {
        var cur = --this.current
        this.getNoticeList(cur)
      }
    },

    nextItem () {
      if (this.current <= this.pages) {
        var cur = ++this.current
        this.getNoticeList(cur)
      }
    },

    // 去公告列表
    goNoticeList () {
      this.$router.push({ path: '/notice-list', query: { shopId: this.shopId } })
    },

    // 去公告详情
    goNoticeDet (id) {
      this.id = id
      this.getNoticeDet()
      this.$router.push({
        path: '/notice-detail',
        query: {
          id: id,
          shopId: this.shopId
        }
      })
    }
  }
}
</script>

<style scoped src='~/assets/css/notice-detail.css'></style>
